<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px'
      }"
    >
      <a-form layout="inline" :model="searchState">
        <a-form-item>
          <a-input v-model:value="searchState.value" placeholder="Username">
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button type="primary" @click="add">增加</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <a-table
        :columns="columns"
        :data-source="data"
        rowKey="id"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #cover="{text}">
          <a-image :width="50" :src="text" class="book-cover" />
        </template>
        <template #action="{record }">
          <a-space>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-popconfirm
              title="您确定删除该条信息"
              ok-text="确认"
              cancel-text="取消"
              @confirm="del(record.id)"
            >
              <a-button type="primary" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
  <a-modal v-model:visible="visible" title="Title" @ok="handleOk">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="登录名">
        <a-input
          v-model:value="formState.loginName"
          :disabled="!!formState.id"
        />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input v-model:value="formState.password" />
      </a-form-item>
      <!-- <a-form-item label="描述">
        <a-input v-model:value="formState.description" />
      </a-form-item> -->
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk"
        >确认</a-button
      >
    </template>
  </a-modal>
</template>
<script lang="ts">
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import { defineComponent, onMounted, ref } from "vue";
import { userList, userSave, userDel } from "@/api";
import { message } from "ant-design-vue";
import { Tool } from "@/util/tool";
declare let hexMd5: any;
declare let KEY: any;

const columns = [
  {
    dataIndex: "loginName",
    key: "loginName",
    title: "登录名",
    slots: { title: "loginName", customRender: "loginName" }
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "密码",
    dataIndex: "password",
    key: "password"
  },
  {
    title: "Action",
    key: "action",
    slots: { customRender: "action" }
  }
];
export default defineComponent({
  setup: function() {
    let data = ref();
    let loading = ref(true);
    const mloading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const searchState = ref({ value: "" });
    const treeData = ref();
    let pagination = ref({
      pageSize: 10,
      current: 1,
      total: 0
    });
    const formState = ref();
    formState.value = {};
    onMounted(() => {
      hander({
        page: pagination.value.current,
        size: pagination.value.pageSize
      });
    });
    /**
     * 查询列表方法
     * @param params
     */
    const hander = async (params: any) => {
      let res = await userList({
        page: params.page,
        size: params.size,
        loginName: params.loginName
      });
      data.value = res.data.content.list;
      pagination.value.total = res.data.content.total;
      pagination.value.current = params.page;
      loading.value = false;
    };

    /**
     * 新增/编辑
     */
    const handleOk = async () => {
      mloading.value = true;

      formState.value.password = hexMd5(formState.value.password + KEY);

      // formState.value.password
      let res = await userSave(formState.value);
      if (res.data.success) {
        await hander({
          page: pagination.value.current,
          size: pagination.value.pageSize
        });
        mloading.value = false;
        visible.value = false;
      } else {
        message.error(res.data.message);
      }
    };
    const handleCancel = () => {
      visible.value = false;
    };
    const edit = (item: any) => {
      formState.value = Tool.copy(item);
      visible.value = true;
    };
    /**
     * 增加电子书
     */
    const add = () => {
      formState.value = {};
      visible.value = true;
    };
    const del = async (id: number) => {
      await userDel(id);
      await hander({
        page: pagination.value.current,
        size: pagination.value.pageSize
      });
    };

    const handleTableChange = (pagination: any) => {
      hander({ page: pagination.current, size: pagination.pageSize });
    };
    const search = async () => {
      console.log(searchState.value.value);
      await hander({
        page: pagination.value.current,
        size: pagination.value.pageSize,
        loginName: searchState.value.value
      });
    };

    return {
      data,
      columns,
      pagination,
      loading,
      handleTableChange,
      visible,
      handleOk,
      handleCancel,
      edit,
      add,
      del,
      search,
      treeData,
      searchState,
      mloading,
      formState,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 }
    };
  },
  components: {
    SmileOutlined,
    DownOutlined
  }
});
</script>
<style scope>
.book-cover {
  border-radius: 8%;
}
</style>
